// out:../css/
@import "./base.less"; 

body{
    background-color: #f9fafb;
}

@vw:3.75vw;


// 头部
header{
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15/@vw);
    // 固定定位的盒子，宽度靠内容撑开，需要设置宽度
    width: 100%;
    height: (50/@vw);
    background-color: #fff;
    // 左边
    .left{
        height: (50/@vw);
        width: (235/@vw);
        background-image: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    a{
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffe31b;
        border-radius: (15/@vw);
        text-align: center;
        line-height: (30/@vw);
        font-size: (14/@vw);
    }
}

// 搜索区域
.search{
    // 头部固定定位，脱标不占位置，加外边距
    margin-top: (50/@vw);
    padding: (10/@vw) (15/@vw);
    height: (52/@vw);
    .txt{
        height: (32/@vw);
        background-color: #f2f4f5;
        border-radius: (16/@vw);
        text-align: center;
        line-height: (32/@vw);
        color: #a1a4b3;
        font-size: (14/@vw);
        .iconfont{
            font-size: (16/@vw);
        }
    }

}

// banner区域
.banner{
    padding: 0 (15/@vw);
    height: (108/@vw);
    ul{
        li{
            width: (345/@vw);
            height: (108/@vw);
            img{
                width: 100%;
                height: 100%;
                //couver完全覆盖
                //缩放img：图片比例与父级盒子比例不同，避免图片挤压变形
                object-fit: cover;
                border-radius: (5/@vw);
            }
           
        }
    }
}

// 排行榜
.list{
    margin-top: (20/@vw);
    padding: 0 (15/@vw);
    li{
        display: flex;
        margin-bottom: (16/@vw);
        height: (105/@vw);
        background-color: #fff;
        border-radius: (10/@vw);
        .pic{
            margin-right: (20/@vw);
            img{
                width: (105/@vw);
                height: (105/@vw);
                border-radius: (10/@vw);
            }
        }
        .txt{
            a{
                //换行
                display: block;
                font-size: (12/@vw);
                color: #a1a4b3;
                line-height: 1.8;
            }
            .more{
                font-size: (14/@vw);
                color: #333;
                .iconfont{
                    font-size: (16/@vw);
                }
            }
        }
    }
}

// 标题（公共样式）
.title{
    display: flex;
    justify-content: space-between;
    margin-bottom: (16/@vw);
    line-height: (25/@vw);
    h4{
        font-size: (20/@vw);
    }
    a{
        font-style: (12/@vw);
        color: #a1a4b3;
    }
}

// 推荐区域
.recommend{
    padding: 0 (15/@vw);
    ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            width: (105/@vw);
            height: (143/@vw);
            margin-bottom: (16/@vw);
            // background-color: greenyellow;
            .pic{
                position: relative;
                width: (105/@vw);
                height: (105/@vw);
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: (10/@vw);
                }
                .cover{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: (70/@vw);
                    height: (28/@vw);
                    background-color: rgba(0,0,0,0.8);
                    border-radius: 0 (10/@vw) 0 (10/@vw);
                    text-align: center;
                    line-height: (28/@vw);
                    color: #fff;
                    font-size: (14/@vw);
                }
            }
            .txt{
                font-size: (14/@vw);
            }
        }
    }
}

// 下载区域
.download{

    position: fixed;
    left: (15/@vw);
    bottom: (30/@vw);

    display: flex;
    // justify-content: space-between;
    align-items: center;

    padding: 0 (10/@vw) 0 (15/@vw);
    width: (345/@vw);
    height: (45/@vw);
    background-color: #fff;
    border-radius: (22.5/@vw);
    img{
        margin-right: (10/@vw);
        height: (36/@vw);
        width: (36/@vw);
    }
    p{
        flex: 1;
        font-size: (14/@vw);
    }
    span{
        text-align: center;
        line-height: (32/@vw);
        height: (32/@vw);
        width: (32/@vw);
        background-color: #f2f4f5;
        border-radius: 50%;
        font-size: (16/@vw);
    }
}